/* 1. `background-image` is set inline by the component logic */

.credit-card__stored-card {
	background-position: 18px center; /* 1 */
	background-repeat: no-repeat; /* 1 */
	background-size: 60px 38px; /* 1 */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 15px 15px 15px 95px;
}

.credit-card__stored-card-name {
	color: var( --color-neutral-50 );
	margin-right: 10px;
}

.credit-card__stored-card-number {
	color: var( --color-neutral-70 );
	flex-basis: 100%;
	font-weight: 600;
}

.credit-card__stored-card-expiration-date {
	color: var( --color-neutral-50 );
	font-style: italic;
	white-space: nowrap;
}

.credit-card.is-selected {
	.credit-card__stored-card-name,
	.credit-card__stored-card-expiration-date {
		color: var( --color-primary-50 );
	}

	.credit-card__stored-card-number {
		color: var( --color-primary-70 );
	}
}
